<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>七一云党建</title>
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/index.css">
	 <script src="js/jquery.js"></script>
     <script src="js/slider.js"></script>
	<meta name="viewport" content="width=device-width">
</head>
<body>
	<div class="header">
		 <div class="container clearfix">
		 	<div class="left">
				<a href="index.html" >
					<img src="images/logo.png" alt="">
				</a>
		 	</div>
		 	<ul class="right">
				<li class="active">
					<a href="/">首页</a>
				</li>
				<li>
					<a href="html/list.html">产品介绍</a>
				</li>
				<li>
					<a href="html/contact.html">联系我们</a>
				</li>
		 	</ul>
		</div>
	</div>
	<!-- banner -->
	 <div class="banner" id="banner">
            <div class="bd">
                <ul>
                    <li class="slider" >
                   			 <img src="images/banner.jpg" alt="">
                    </li>
                </ul>
            </div>
            <div class="hd">
                <ul>
                    <li></li>
                </ul>
            </div>
            <a class="prev" href="javascript:void(0)"></a>
            <a class="next" href="javascript:void(0)"></a>
        </div>
  <!-- part1 -->
  <div class="section1">
			  <div class="container">
							<h4>新思想 新时代 新党建</h4>
							<div class="secetionP">
							<p>为了紧跟“互联网+党建”的步伐，帮助众多企业落实智慧党建工作。“七一云党建”基于新媒体形势下的移动端口，独创了一整套“互联网+党建”</p>
							<p>解决方案，让党员能够随时随地参加党组织活动、在线学习、交流互动，即使远在海外也能第一时间听到党中央的声音，感受到党组织</p>
							<p>就在身边，贯彻学习党的政策法规，落实党建信息化建设。</p>
				</div>
							<ul class="clearfix">
								<li>
									<img class="imgs1" src="images/part1_item1.png" />
									<img class="imgs2" src="images/part1_item1Active.png" />
									<h5>吸粉转换神器</h5>
									<p class="hr"></p>
									<p>基于微信公众号打造的一站式党建方案：平台申请、菜单微官网搭建、党建专题文章、信息长图、党建主题H5等；全方位运营，打造专属党建的宣传中心。
			</p>
								</li>
								<li>
									<img class="imgs1" src="images/part1_item2.png" />
									<img class="imgs2" src="images/part1_item2Active.png" />
									<h5>30+行业解决方案</h5>
									<p class="hr"></p>
									<p>微信小程序、手机站、党建APP，帮助
							企业实现在线答题、积分考试、电子
							书库、信访举报等具有党建学习交流
							作用的移动程序。
			</p>
								</li>
								<li>
									<img class="imgs1" src="images/part1_item3.png" />
									<img class="imgs2" src="images/part1_item3Active.png" />
									<h5>多用户营销系统</h5>
									<p class="hr"></p>
									<p>利用丰富的多媒体技术开展党建形象定制
			工作，包括：专属表情包、定制MG
			动画形象和宣传片等，让党建宣传工
			作生动有趣，落实更到位。
			</p>
								</li>
								<li>
									<img  class="imgs1" src="images/part1_item4.png" />
									<img  class="imgs2" src="images/part1_item4Active.png" />
									<h5>海量特色功能</h5>
									<p class="hr"></p>
									<p>运用3D技术和信息化手段，打造专属
			党建工程的虚拟展馆。 展示党建成果、
			宣传党的政策、历史，交流先进经验，
			开展党员教育。
			</p>
								</li>
							</ul>
						</div>
  </div>
	<div class="part2">
		<div class="container">
			<div class="part2Title">
				<span>特色功能</span>

			</div>
			<div class="part2Wrap">
				<div class="partList">
					<a href="html/list.html">
						<div>
							<img src="images/function1.png" alt="">
						</div>
						<p>微官网</p>
					</a>
				</div>
				<div class="partList">
					<a href="html/list2.html">
						<div>
							<img src="images/function2.png" alt="">
						</div>
						<p>微信运营</p>
					</a>
				</div>
				<div class="partList">
					<a href="html/list3.html">
						<div>
							<img src="images/function3.png" alt="">
						</div>
						<p>创意H5</p>
					</a>
				</div>
				<div class="partList">
					<a href="html/list4.html">
						<div>
							<img src="images/function4.png" alt="">
						</div>
						<p>MG动画</p>
					</a>
				</div>
				<div class="partList">
					<a href="html/list5.html">
						<div>
							<img src="images/function5.png" alt="">
						</div>
						<p>在线答题</p>
					</a>
				</div>
				<div class="partList">
					<a href="html/list6.html">
						<div>
							<img src="images/function6.png" alt="">
						</div>
						<p>电子书库</p>
					</a>
				</div>
				<div class="partList">
					<a href="html/list7.html">
						<div>
							<img src="images/function7.png" alt="">
						</div>
						<p>信访举报</p>
					</a>
				</div>
				<div class="partList">
					<a href="html/list8.html">
						<div>
							<img src="images/function8.png" alt="">
						</div>
						<p>形象定制</p>
					</a>
				</div>
				<div class="partList">
					<a href="html/list9.html">
						<div>
							<img src="images/function9.png" alt="">
						</div>
						<p>移动APP</p>
					</a>
				</div>
				<div class="partList">
					<a href="html/list10.html">
						<div>
							<img src="images/function10.png" alt="">
						</div>
						<p>VR展馆</p>
					</a>
				</div>
			</div>
		</div>
	</div>
	<div class="part3">
		<div class="container">
			<div class="part3Title">
				<span>为什么选择我们?</span>
			</div>
			<div class="part3Select">
				<div class="part3tab">
					<div class="part3Item clearfix active">
						<div class="left">
							<img src="images/select.png" alt="" class="img1">
							<img src="images/selectActive.png" alt="" class="img2">
						</div>
						<div class="right">
							<p class="p1">
								线上传播渠道覆盖更广
							</p>
							<p class="p2">
								全面对接新媒体移动服务端口，从公众号、HTML5、小程序到
								移动APP等，打通移动互联网多种传播渠道。
							</p>
						</div>
					</div>
					<div class="part3Item clearfix">
						<div class="left">
							<img src="images/select.png" alt="" class="img1">
							<img src="images/selectActive.png" alt="" class="img2">
						</div>
						<div class="right">
							<p class="p1">
								党建服务功能更多样
							</p>
							<p class="p2">
								从运营到定制、从内容到画面、多形式联动呈现，套餐式满足
								您的党建工作需要，一键定制党建服务“大观园” 。
							</p>
						</div>
					</div>
					<div class="part3Item clearfix">
						<div class="left">
							<img src="images/select.png" alt="" class="img1">
							<img src="images/selectActive.png" alt="" class="img2">
						</div>
						<div class="right">
							<p class="p1">
								数据内容库更强大
							</p>
							<p class="p2">
								我们拥有庞大而全面的党建数据内容库、不断更新的党建题库、
								最新政策法规解读、相关党建宣传文档等……让党建落实工作更
								规范、更省心。
							</p>
						</div>
					</div>
				</div>
				<div class="part3Content">
					<div class="part3contentItem active">
						<img src="images/part3_1.png" alt="">
					</div>
					<div class="part3contentItem">
						<img src="images/part3_2.png" alt="">
					</div>
					<div class="part3contentItem">
						<img src="images/part3_3.png" alt="">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="section5 part4 w mini-website">
		<div class="container">
				<div class="part4Title">
					<span>为什么选择我们?</span>
				</div>
				<div class="lunbo">
					<ul class="clearfix">
						<li class="pre-2">
							<img src="images/1.jpg" alt="">
							<div class="mask">
								<div class="erweicode">
									<img src="images/code.png" alt="">
								</div>
							</div>
						</li>
						<li class="pre">
							<img src="images/2.jpg" alt="">
							<div class="mask">
								<div class="erweicode">
									<img src="images/code2.png" alt="">
								</div>
							</div>
						</li>
						<li class="active">
							<img src="images/3.jpg" alt="">
							<div class="mask">
								<div class="erweicode">
									<img src="images/code3.png" alt="">
								</div>
							</div>
						</li>
						<li class="next">
							<img src="images/4.jpg" alt="">
							<div class="mask">
								<div class="erweicode">
									<img src="images/code4.png" alt="">
								</div>
							</div>
						</li>
						<li class="next-2">
							<img src="images/5.jpg" alt="">
							<div class="mask">
								<div class="erweicode">
									<img src="images/code5.png" alt="">
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="lead-left">
					<i><img src="images/left.png"/></i>
				</div>
				<div class="lead-right">
					<i><img src="images/right.png"/></i>
				</div>
			</div>
	</div>

	<div class="footer">
		<div class="container clearfix">
			<div class="left footerLeft1"> 
					<div class="footerTitle">
							<span>友情链接</span>
					</div>
					<ul class="footerLeft1Ul">
						<li>
							<a href="">中国纺机网</a>
						</li>
						<li>
							<a href="">纺友商城</a>
						</li>
						<li>
							<a href="">纺友网</a>
						</li>
						<li>
							<a href="">纺友云</a>
						</li>
						<li>
							<a href="">纺机商城</a>
						</li>
						<li>
							<a href="">2025.net</a>
						</li>
					</ul>
			</div>
			<div class="left footerLeft2">
				<div class="footerTitle">
						<span>联系我们</span>
				</div>
				<div class="address">
					<p>湖北省武汉市洪山区珞瑜路889-1号融众国际14楼</p>
					<p>客服热线：400-189-2025</p>
					<p>联系QQ：259 259 2025</p>
				</div>
				<div class="addressInfo">
				<p>Copyright ©All rights reserved 版权所有: 武汉纺友技术有限公司 1998-2016 </p>
				<p>鄂ICP备09014919号-39</p>
				</div>
			</div>
			<div class="right footerRight">
				<div class="footerTitle">
						<span>了解更多</span>
				</div>
				<img src="images/scode.jpg" alt="">
			</div>	
			
		</div>
	</div>
	<script type="text/javascript">
            var Sys = {};
            var ua = navigator.userAgent.toLowerCase();
            if(window.ActiveXObject) {
                Sys.ie = ua.match(/msie ([\d.]+)/)[1];
                if(Sys.ie < 9) {
                    alert('你目前的IE版本为' + Sys.ie + '版本太低，请升级！');
                    location.href = "http://windows.microsoft.com/zh-CN/internet-explorer/downloads/ie";
                }
            }
		</script>
	<script>
		  $('#banner').slide({mainCell:".bd ul",autoPlay:true})
		  $(".section1 ul li").hover(function() {
				$(this).find("img").eq(1).css("display", "inline-block");
				$(this).find("img").eq(0).css("display", "none");
				$(this).css("background", "#c50000");
				$(this).find("h5").css({
					"color": "white"
				});
				$(this).find(".hr").css({
					"backgroundColor": "white"
				});
				$(this).find("p").css({
					"color": "white"
				});
			}, function() {
				$(this).find("img").eq(0).css("display", "inline-block");
				$(this).find("img").eq(1).css("display", "none");
				$(this).css("background", "#ffffff");
				$(this).find("h5").css({
					"color": "#666"
				});
				$(this).find(".hr").css({
					"backgroundColor": "#c50000"
				});
				$(this).find("p").css({
					"color": "#666"
				});
	});
		  	$('.part3Item').click(function () {
				var index =$(this).index()
				for(var i=0;i<$('.part3Item').length;i++){
                    $('.part3Item').eq(i).removeClass('active')
					$('.part3contentItem').eq(i).removeClass('active')
				}
				$(this).addClass('active')
                $('.part3contentItem').eq(index).addClass('active')
            });
          var timer33 = null;
          var index1 = 2;
          var arr = [0, 1, 2, 3, 4];
          function play() {
              index1++;
              index1 < 0 ? index1 = 4 : index1 = index1;
              index1 > 4 ? index1 = 0 : index1 = index1;
              var first = arr[0];
              arr.splice(0, 1);
              arr.push(first);
              $(".mini-website ul>li").attr("class", "");
              $(".mini-website ul>li").eq(index1).addClass("active");
              $(".mini-website ul>li").eq(arr[3]).addClass("next");
              $(".mini-website ul>li").eq(arr[4]).addClass("next-2");
              $(".mini-website ul>li").eq(arr[1]).addClass("pre");
              $(".mini-website ul>li").eq(arr[0]).addClass("pre-2");
          };
          timer33 = setInterval(play, 2500);
          $(".lead-left").on("click", function() {
              clearInterval(timer33);
              index1--;
              index1 < 0 ? index1 = 4 : index1 = index1;
              index1 > 4 ? index1 = 0 : index1 = index1;
              var last = arr[4];
              arr.pop();
              arr.splice(0, 0, last);
              $(".mini-website ul>li").attr("class", "");
              $(".mini-website ul>li").eq(index1).addClass("active");
              $(".mini-website ul>li").eq(arr[3]).addClass("next");
              $(".mini-website ul>li").eq(arr[4]).addClass("next-2");
              $(".mini-website ul>li").eq(arr[1]).addClass("pre");
              $(".mini-website ul>li").eq(arr[0]).addClass("pre-2");
          });
          $(".lead-right").on("click", function() {
              clearInterval(timer33);
              index1++;
              index1 < 0 ? index1 = 4 : index1 = index1;
              index1 > 4 ? index1 = 0 : index1 = index1;
              var first = arr[0];
              arr.splice(0, 1);
              arr.push(first);
              $(".mini-website ul>li").attr("class", "");
              $(".mini-website ul>li").eq(index1).addClass("active");
              $(".mini-website ul>li").eq(arr[3]).addClass("next");
              $(".mini-website ul>li").eq(arr[4]).addClass("next-2");
              $(".mini-website ul>li").eq(arr[1]).addClass("pre");
              $(".mini-website ul>li").eq(arr[0]).addClass("pre-2");
          });

          $('.mini-website ul li').mouseover(function(event) {
              clearInterval(timer33);
          }).mouseout(function(event) {
              clearInterval(timer33);
              timer33 = setInterval(play, 2500);
          });

	</script>
</body>
</html>